<template>
    <a-modal 
    class="my-modal" 
    v-model:visible="modal_show" 
    title="Tar包检查" 
    @ok="modelok" 
    width="1300px" 
    :maskClosable="false" 
    :centered="true"
    :destroyOnClose="true"
    >
        <div class="body-content">
            <a-row style="width: 100%;">
                <a-tabs v-model="avtive_key" :default-active-key="defaultactivekey" @change="tabs_change" style="width: 100%;">
                    <a-tab-pane :key="1">
                        <template #tab>
                            <span>
                                <a-badge status="success"></a-badge>
                                匹配Tar包({{tifs_array.length}}) 
                            </span>
                        </template>
                    </a-tab-pane>
                    <a-tab-pane :key="2">
                        <template #tab>
                            <span>
                                <a-badge status="warning"></a-badge>
                                不识别Tar包({{ tifs_errors.length }})
                            </span>
                        </template>
                    </a-tab-pane>
                </a-tabs>
            </a-row>
            <a-row style="margin-top: 10px" v-show="avtive_key == 1">
                <a-table 
                :data-source="tifs_array" 
                :columns="tifs_array_columns" 
                :class="['task-table', 'image-check']" 
                size="small" 
                :showHeader="true" 
                tableLayout="fixed" 
                bordered 
                :pagination="tifs_array_pagination">
                    <template #expandedRowRender="{ record }">
                        <a-layout-content style="margin: 10px;">
                            <a-row >
                                <a-descriptions title="信息" bordered>
                                    <a-descriptions-item label="Tar包" :span="3">
                                        {{ record.tif }}
                                    </a-descriptions-item>
                                </a-descriptions>
                            </a-row>
                        </a-layout-content>
                    </template>
                </a-table>
            </a-row>
            <a-row style="margin-top: 10px" v-show="avtive_key == 2">
                <a-table 
                :data-source="tifs_errors" 
                :columns="tifs_errors_columns" 
                :class="['task-table']" 
                size="small" 
                :showHeader="true" 
                tableLayout="fixed" 
                bordered 
                :pagination="tifs_errors_pagination">
                    <template #expandedRowRender="{ record }">
                        <a-layout-content style="margin: 10px;">
                            <a-row>
                                <a-descriptions title="信息" bordered>
                                    <a-descriptions-item label="Tar包" :span="3">
                                        {{ record.tif }}
                                    </a-descriptions-item>
                                </a-descriptions>
                            </a-row>
                        </a-layout-content>
                    </template>
                </a-table>
            </a-row>
        </div>
    </a-modal>
</template>
<script>
export default {
    components: {},
    data() {
        return {
            modal_show: false,
            avtive_key: 1,
            defaultactivekey: 1,
            tifs_array: [],
            tifs_array_columns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 255,
                    align: 'center',
                    ellipsis: true,
                },
                {
                    title: '卫星类型',
                    dataIndex: 'SatelliteID',
                    width: 50,
                    align: 'center',
                },
                {
                    title: '相机类型',
                    dataIndex: 'camera',
                    width: 50,
                    align: 'center',
                },
            ],
            tifs_array_pagination: {
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total} 个，当前${range[0]}-${range[1]}`;
                },
            },
            tifs_errors: [],
            tifs_errors_columns: [
                {
                    title: '名字',
                    dataIndex: 'name',
                    width: 225,
                    align: 'center',
                    ellipsis: true,
                },
                {
                    title: '相机类型',
                    dataIndex: 'SatelliteID',
                    width: 45,
                    align: 'center',
                },
                {
                    title: '传感器',
                    dataIndex: 'sensor',
                    width: 45,
                    align: 'center',
                },
                {
                    title: '错误信息',
                    dataIndex: 'message',
                    width: 270,
                    align: 'center',
                    ellipsis: true,
                },
            ],
            tifs_errors_pagination: {
                size: 'small',
                pageSize: 10,
                total: 0,
                showTotal: (total, range) => {
                    return `共 ${total} 个，当前${range[0]}-${range[1]}`;
                },
            },


            //mitt
            mitt_input_tar_ckeck_modal_id:"",
            mitt_input_tar_ckeck_modal_back_id:"",
        };
    },
    mounted() {
        this.defaultactivekey = 1;
        this.mitt_input_tar_ckeck_modal_id=this.$mitt.on('input_tar_ckeck_modal',(uid,data)  => {
            this.mitt_input_tar_ckeck_modal_back_id=uid
            this.modal_show = true;
            this.defaultactivekey = 1
            this.tifs_array= data?.tifs_array||[]
            this.tifs_errors = data?.tifs_errors || []
            for (let index = 0; index < this.tifs_array.length; index++) {
                this.tifs_array[index].key = index;
            }
            for (let index = 0; index < this.tifs_errors.length; index++) {
                this.tifs_errors[index].key = index;
            }
            if (this.tifs_array.length) {
                this.defaultactivekey = 1
            }
            if (this.tifs_array.length && this.defaultactivekey == 0) {
                this.defaultactivekey = 2
            }
            if (this.defaultactivekey == 0) {
                this.defaultactivekey = 1
            }
            this.avtive_key = this.defaultactivekey
        });
    },
    beforeUnmount() {
        this.$mitt.off('input_tar_ckeck_modal',this.mitt_input_tar_ckeck_modal_id);
    },
    methods: {
        modelok() {
            const that = this;
            if (this.tifs_array.length == 0) {
                this.$confirm({
                    title: `当前输入原始影像匹配Tar包为0个,请重新选择目录`,
                    onOk() {
                        that.modal_show = false;
                    },
                    onCancel() {},
                    class: 'test',
                });
            } else if (this.tifs_errors.length > 0) {
                this.$confirm({
                    title: `当前输入原始影像匹配Tar包${this.tifs_array.length}个,不识别Tar包${this.tifs_errors.length}个,是否忽略并继续?`,
                    onOk() {
                        that.back_ok(true);
                    },
                    onCancel() {},
                    class: 'test',
                });
            } else {
                that.back_ok(true);
            }
        },
        tabs_change(activeKey) {
            this.avtive_key = activeKey
        },
        back_ok(do_or_not) {
            this.$mitt.oemit('input_tar_ckeck_modal_back',do_or_not,this.mitt_input_tar_ckeck_modal_back_id);
            this.modal_show = false;
        },
    },
};
</script>